<template>
    <div class="queueView">
        <div class="top">
            <input type="text" v-model="input" placeholder="请输入客户名称">
            <div class="find" @click="finding()">查询</div>
            <div class="reset">重置</div>
        </div>
        <el-table ref="multipleTable" :data="compData" tooltip-effect="dark" style="width: 100%"
            :header-cell-style="{ backgroundColor: '#EEEEEE' }">
            <el-table-column prop="carId" label="序号" width="180">
            </el-table-column>
            <el-table-column prop="carName" label="客户名称" width="200">
            </el-table-column>
            <el-table-column prop="carPhone" label="手机号码" width="200" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="carType" label="意向车型" width="180" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="carColor" label="颜色" width="180" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="whatMuch" label="是否有库存" width="180" show-overflow-tooltip>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">{{ scope.row.isuse ? '发货' : '' }}</el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage1"
            :page-sizes="[5, 10, 15, 20]" :page-size="40" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
import { getlineList } from "@/api/index";
export default {
    name: "queueView",
    data() {
        return {
            currentPage: 1,
            pageSize: 5,//每页显示条数
            total: 0,
            currentPage1: 1,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4,
            tableData: [

            ],
            multipleSelection: [],
            input: '',
            form: {},
            zdydialog: false,
        }
    },
    // created() {
    //     this.geyData()

    // },
    mounted() {
        this.getlineList()
    },
    computed: {
        compData() {
            return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
        }
    },
    methods: {
        // 获取数据
        async getlineList() {
            const _data = await getlineList();
            const _res = await (_data).data;
            // console.log(_res);
            this.tableData = _res,
            this.total = this.tableData.length
        },
        handleClick(row) {
            row.isuse = !row.isuse
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val
            this.currentPage = 1
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val
        },
        // geyData() {
        //     this.total = this.tableData.length
        // },
        // 查询
        finding() {
            const input = this.input
            // console.log(input);
            if (input) {
                // console.log("input输入的搜索内容：" + this.input)
                this.tableData = this.tableData.filter(data => {
                    // console.log("object:" + Object.keys(data))
                    // console.log(data.name)
                    // let reSearch = data.name
                    return data.carName.indexOf(input) > -1
                })
            }

        },



    }
}

</script>

<style lang="less" scoped>
.queueView {
    width: 1250px;
    height: 800px;
    margin-left: 10px;
    padding: 30px;
    background-color: #fff;
    line-height: 0;

    img {
        width: 70px;
        height: 50px;
    }

    .top {
        display: flex;
        align-items: center;

        input {
            width: 200px;
            height: 40px;
            border: 1px #dcdfe6 solid;
            box-sizing: border-box;
            padding: 0 15px;
            margin-right: 20px;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            outline-color: #409eff;

        }

        .find,
        .reset {
            width: 100px;
            height: 40px;
            background-color: #409eff;
            border-radius: 4px;
            margin-left: 20px;
            text-align: center;
            line-height: 40px;
            color: #fff;
        }

        .reset {
            background-color: #fff;
            color: #000;
            border: #999 solid 1px;
            box-sizing: border-box;
        }
    }

    .el-table {
        margin-top: 80px;
    }

    .el-pagination {
        height: 60px;
        padding-top: 50px;
        text-align: right;
    }


}
</style>